<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>提现</span>
      </div>
      <!-- 已经添加的银行卡的盒子 -->
      <div v-if="!bankCardList.length" class="new-card-box">
        <router-link :to="{ path: '/account/card' }">
          <el-button type="success" icon="el-icon-circle-plus-outline"
            >添加银行卡</el-button
          ></router-link
        >
      </div>
      <div v-else class="bankCard-list">
        <!-- 已添加的银行卡容器 -->
        <span style="margin-left:18px">请选择收款银行卡</span>
        <div class="card-box">
          <div
            v-for="(item, index) in bankCardList"
            :key="index"
            style="position: relative"
            @click="selected(index)"
            :class="{ selectedStyle: index === extractForm.selectedIndex }"
          >
            <div class="card-info">
              <span>{{ item.bankName }}</span>
              <span>{{ item.cardNum }}</span>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="bottom">
          <el-form
            :model="extractForm"
            :rules="rules"
            ref="extractForm"
            label-width="80px"
            class="demo-extract"
          >
            <el-form-item prop="selectedIndex" class="selected-item">
            </el-form-item>
            <el-form-item label="可取金额">
              <span>{{ this.accountInfo.balance }}元</span>
            </el-form-item>
            <el-form-item label="提取金额" prop="pass">
              <el-input-number
                :controls="false"
                v-model="extractForm.amount"
                :min="1"
                :max="10000"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <div class="identify-box" @click="makeCode">
                <SIdentify :identifyCode="identifycode"></SIdentify>
              </div>
            </el-form-item>
            <el-form-item label="验证码" prop="verifycode">
              <el-input v-model="extractForm.verifycode"></el-input>
            </el-form-item>
            <el-form-item label="支付密码" prop="payPwd">
              <el-input v-model="extractForm.payPwd" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('extractForm')"
                >提现</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 添加银行卡的按钮 -->
    </el-card>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { authRealNameAndPWS } from "@/utils/auth";
import SIdentify from "@/components/Identify/SIdentify.vue";
export default {
  components: {
    SIdentify,
  },
  data() {
    var validateverifycode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.identifycode) {
        callback(new Error("验证码错误"));
      } else {
        callback();
      }
    };
    return {
      extractForm: {
        // 金额
        amount: "",
        // 验证码
        verifycode: "",
        // 当前选择银行的索引
        selectedIndex: "",
        // 支付密码
        payPwd:'',
        // 银行卡id
        card_id:'',
      },
      rules: {
        selectedIndex: [
          { required: true, trigger: "change", message: "请选择银行" },
        ],
        payPwd: [
          { required: true, trigger: "blur", message: "请输入支付密码" },
        ],
        verifycode: [{ validator: validateverifycode, trigger: "blur" }],
      },
      identifycode: "",
      identifycodes: "0123456789",
    };
  },
  methods: {
    ...mapActions({
      getBankCard: "card/getBankCard",
      extract:'assetManage/extract',
      getInfo: "user/getInfo",
    }),
    // 点击银行
    selected(index) {
      if (index === this.extractForm.selectedIndex) {
        // 假如传进来的索引和已记录的索引相同，就取消记录的索引
        this.extractForm.selectedIndex = "";
      } else {
        // 如果和记录的索引不相同，就记录当前传入的索引
        this.extractForm.selectedIndex = index;
        this.extractForm.card_id = this.bankCardList[index].cardId
        this.$refs.extractForm.clearValidate("selectedIndex");
      }
    },
    // 生成4位随机数字
    randomNum(max) {
      return Math.floor(Math.random() * max);
    },
    // 生成4位验证码
    makeCode() {
      this.identifycode = "";
      for (let index = 0; index < 4; index++) {
        this.identifycode +=
          this.identifycodes[this.randomNum(this.identifycodes.length)];
      }
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.extract(this.extractForm).then((res) => {
            this.$message({
              message: "提现成功",
              type: "success",
            });
            this.makeCode();
            this.getInfo();
          });
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    authRealNameAndPWS(this,'payPwdStatus')
    this.makeCode();
    this.getBankCard();
  },
  computed: {
    // 银行卡列表
    ...mapGetters(["bankCardList", 'accountInfo']),
  },
};
</script>

<style lang="scss" scoped>
.app-container {
    .card-title{
        font-size: 22px;
    }
  .card-box {
    display: flex;
    flex-wrap: wrap;
    .card-info {
      width: 200px;
      height: 120px;
      background-color: #cedfff;
      border-radius: 5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 8px 14px;
    }
  }
  .el-input {
    max-width: 200px;
  }
  .selectedStyle {
    .card-info {
      border: 1px solid rgb(28, 104, 167);
    }
  }
  .selected-item {
    position: relative;
    top: -50px;
  }
}
</style>